import React, { Component, PropTypes } from 'react';

class Hot extends Component {
    render() {
        return (
            <section>
                <div className="servic-render">
                    <h1 className="render-tit">
                        热门公众号
                    </h1>
                    <ul className="mui-table-view mui-grid-view mui-table-view-border render-table">
                        {
                            this.props.list.map((item, index) => {
                                return <ListItem key={item.id} {...item} />
                            })
                        }
                    </ul>
                </div>
            </section>
        );
    }
}

class ListItem extends Component {

    render() {
        let {href, name,image} = this.props;
        
        return (
            <li className="mui-table-view-cell mui-media mui-col-xs-6 render-cell" title={name}>
                <a className="cell__href" href="javascript:;" data-hotUrl={href}>
                    <i className="render-icon render-icon__tuniu" style={{backgroundImage:`url(${image})`,backgroundSize: "contain"}}></i>
                    <p className="render-text mui-ellipsis-2">{name}</p>
                </a>
            </li>
        );
    }
}

export default Hot;
